<template>
    <div id="app">
        <div>
            <div style="width: 100%;height: 100px;background-color: #2CC3CF;">

                <div id="top" style="position: absolute;margin-top: 50px;margin-left: 50px;">
                    <input id="usename" v-model='username' style="width: 100px;height: auto;text-align: center;" :disabled="true"/>

                    <div id="Back" style="position: absolute;">
                        <el-button v-on:click="Back" :size="20"
                                   style="position: absolute;margin-left: 1000px;margin-top: -30px;">返回首页
                        </el-button>
                        <el-button v-on:click="Refresh" :size="20"
                                   style="position: absolute;margin-left: 1100px;margin-top: -30px;">刷新
                        </el-button>
                    </div>
                </div>


            </div>

        </div>
        <div style="display: flex;flex-direction: row;">
            <div id="left" style="position: absolute;margin-top: 5px;">
                <el-col :span="30">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                             background-color="#2CC3CF" text-color="#fff" active-text-color="#ffd04b" router="true">
                        <el-menu-item :index="{path:'/MyShouCang/' + username +'/'+ myshoucang }">
                            <i class="el-icon-star-on"></i>
                            <span slot="title">我的收藏</span>
                        </el-menu-item>
                        <el-menu-item :index="{path:'/GouWuChe/' + username +'/'+ gouwuche }">
                            <i class="el-icon-shopping-cart-full"></i>
                            <span slot="title">我的购物车</span>
                        </el-menu-item>

                        <el-menu-item :index="{path:'/Order/' + username +'/'+ order }">
                            <i class="el-icon-folder"></i>
                            <span slot="title">我的订单</span>
                        </el-menu-item>
                        <el-menu-item :index="{path:'/My/' + username +'/'+ my }">
                            <i class="el-icon-user"></i>
                            <span slot="title">个人中心</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </div>
            <router-view
                    style="width: 80%;height: 700px;position: absolute;margin-top:10px;margin-left: 150px;background-color:antiquewhite;"></router-view>

        </div>
    </div>

</template>

<script>
    import PLeft from '../components/PersonalPage/PLeft.vue'
    import PTop from '../components/PersonalPage/PTop.vue'

    export default {
        name: 'app',
        components: {
            PLeft,
            PTop
        },
        props: ['username'],
        data() {
            return {
                myshoucang: '我的收藏',
                gouwuche: '我的购物车',
                order:'我的订单',
                my:'个人中心',
				

            }
        },
		methods:{
			Back() {
				
				this.$router.push("/HomePage/"+this.username)
			}
		}
		


    }
</script>
